<script setup>
import { reactive, ref, watch } from 'vue'
import CouponDialog from '@/pages/Coupon/CouponList/components/CouponDialog.vue'
import { queryCouponList, deleteCoupon } from '@/service/coupon.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const couponDialogRef = ref()
const couponList = ref([])
const searchParams = reactive({
  currentPage: 1,
  pageSize: 10,
  keyword: '',
  status: 0,
})
const total_number = ref(0)
watch(
  [() => searchParams.currentPage, () => searchParams.pageSize, () => searchParams.status],
  () => {
    loadData()
  },
  {
    immediate: true,
  }
)
async function loadData() {
  const res = await queryCouponList(
    searchParams.keyword,
    searchParams.status,
    searchParams.currentPage,
    searchParams.pageSize
  )
  console.log(res)
  couponList.value = res.data.records
  total_number.value = res.data.total
}
//TODO 优惠券发放记录

function onTapDeleteCouponButton(row) {
  console.log(row)
  ElMessageBox.confirm('确认要删除这个优惠券吗', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await deleteCoupon(row.id)
      ElMessage.success('成功删除！')
      await loadData()
    })
    .catch(() => {
      ElMessage.info('取消删除')
    })
}
function onTapSearchButton() {
  loadData()
}
function onTapCLearSearchCondition() {
  Object.assign(searchParams, {
    currentPage: 1,
    pageSize: 10,
    keyword: '',
    status: 0,
  })
  loadData()
}
function onTapAddNewCoupon() {
  dialogType.value = 'add'
  couponDialogRef.value.showCouponModal = true
}

// 编辑优惠券
const dialogType = ref('')
const couponInfo = ref([])

function onTapCheckCouponDistributionRecord(row) {}
function onTapEditCoupon(row) {
  dialogType.value = 'edit'
  couponInfo.value = row
  couponDialogRef.value.showCouponModal = true
}
</script>

<template>
  <div class="coupon-list">
    <el-collapse expand-icon-position="left">
      <el-collapse-item title="操作提示">
        <div class="tip">*优惠券在发放时间内，只要未关闭未删除，符合条件就能领取。</div>
        <div class="tip">*优惠券已关闭，不能继续领取，已发放的优惠券在用券时间内能继续使用。</div>
        <div class="tip">*优惠券已删除，不能继续领取，已发放的优惠券不能继续使用。</div>
      </el-collapse-item>
    </el-collapse>
    <el-tabs v-model="searchParams.status" style="margin-top: 10px" type="border-card">
      <el-tab-pane :name="0" label="正常"></el-tab-pane>
      <el-tab-pane :name="1" label="已关闭"></el-tab-pane>
      <el-tab-pane :name="2" label="已过期"></el-tab-pane>
      <el-tab-pane :name="3" label="已删除"></el-tab-pane>
    </el-tabs>
    <el-form style="margin-top: 10px">
      <el-form-item label="优惠券名称:">
        <el-input v-model="searchParams.keyword" placeholder="请输入优惠券名称" style="width: 300px" />
        <el-button plain style="margin-left: 10px" type="primary" @click="onTapSearchButton">查询</el-button>
        <el-button plain type="default" @click="onTapCLearSearchCondition">清空查询</el-button>
        <el-button style="margin-left: auto; margin-right: 20px" type="primary" @click="onTapAddNewCoupon"
          >新增优惠券</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="couponList"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      border
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column label="优惠券名称" min-width="200" prop="name" />
      <el-table-column label="面额">
        <template #default="scope">
          <span>￥{{ scope.row.denomination }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发放时间" width="300">
        <template #default="scope">
          <div>
            <span>{{ scope.row.distributionStartTime }}</span>
            <span>至</span>
            <span>{{ scope.row.distributionEndTime }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="使用门槛" width="100" align="center">
        <template #default="scope">
          <span v-if="scope.row.hasThreshold === 0">无门槛</span>
          <span v-else>￥{{ scope.row.threshold }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发放情况" width="180px">
        <template #default="scope">
          <div style="display: flex; flex-direction: column; align-items: center">
            <span>已发放：{{ scope.row.distributedQuantity }}</span>
            <template v-if="scope.row.hasQuantityLimit === 1">
              <span>待发放：不限量</span>
              <span>发放总量：不限量</span>
            </template>
            <template v-else>
              <span>待发放：{{ scope.row.pendingDistributionQuantity }}</span>
              <span>发放总量：{{ scope.row.quantityLimit }}</span>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用券时间" width="300px">
        <template #default="scope">
          <span v-if="scope.row.expiryType === 0">领取当天起{{ scope.row.validDays }}天可用</span>
          <span v-else>{{ scope.row.availableStartTime }}至{{ scope.row.availableEndTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <span v-if="scope.row.couponStatus === 0">正常</span>
          <span v-if="scope.row.couponStatus === 2">已过期</span>
          <span v-if="scope.row.couponStatus === 1">已关闭</span>
          <span v-if="scope.row.couponStatus === 3">已删除</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200px">
        <template #default="scope">
          <span>
            {{ scope.row.createTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="270px">
        <template #default="scope">
          <div>
            <el-button @click="onTapCheckCouponDistributionRecord(scope.row)">发放记录</el-button>
            <el-button type="primary" @click="onTapEditCoupon(scope.row)">编辑</el-button>
            <el-button type="danger" @click="onTapDeleteCouponButton(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="searchParams.currentPage"
      v-model:page-size="searchParams.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :total="total_number"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px"
    />
    <coupon-dialog ref="couponDialogRef" :data="couponInfo" :type="dialogType" @update="loadData()"></coupon-dialog>
  </div>
</template>

<style lang="scss" scoped>
.coupon-list {
  background-color: #fff;
  padding: 20px;
  .tip {
    color: #666;
    font-size: 14px;
  }
}
:deep(.el-collapse-item__content) {
  padding: 10px;
}
:deep(.el-tabs__content) {
  padding: 0 !important;
}
</style>
